<template>
  <div>
    <p class="desc">选择能发起该审批的人员/部门，不选则默认开放给所有人</p>
    <el-button @click="selectOrg" type="primary" round>
      <el-icon style="margin-right: 4px;">
        <Plus />
      </el-icon>
      请选择
    </el-button>
    <div style="margin-top: 20px">
      <el-tag
        class="org-item"
        :type="org.type === 'dept' ? '' : 'info'"
        v-for="(org, index) in select"
        :key="index + '_org'"
        closable
        size="small"
        @close="removeOrgItem(index)"
      >
        {{ org.name }}
      </el-tag>
    </div>
    <org-picker :show="showOrgSelect" @close="closeSelect" :selected="select" @selectOver="selected"></org-picker>
  </div>
</template>

<script setup name="RootNodeConfig" lang="ts">

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const showOrgSelect = ref(false);

const select = ref(props.config.assignedUser);

const closeSelect = (): void => {
  showOrgSelect.value = false;
};
const selectOrg = () => {
  showOrgSelect.value = true;
};

const selected = (selected: any) => {
  showOrgSelect.value = false;
  selected.forEach((val: any) => {
    if (!select.value.includes(val)) {
      select.value.push(val);
    }
  });
};

const removeOrgItem = (index:number) => {
  select.value.splice(index, 1);
}
</script>

<style lang="scss" scoped>
.desc {
  font-size: small;
  color: #8c8c8c;
}

.org-item {
  margin: 5px;
}
</style>
